<!-- 展开行内放表格 -->
<template>
  <general-table 
    :columns="columns"
    :tableData="tableData"
    :tableAttr="tableAttr"
  >
    <template #expand>
      <general-table 
        :columns="expandCol"
        :tableData="expandTable"
        :tableAttr="tableAttr"
      >
        <template #operate>
          <el-button type="primary" size="small"><el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;add</el-button>
          <el-popover
            effect="light"
            trigger="hover"
            width="auto"
            content="popover"
            :teleported="false"
          >
            <template #reference>
              <el-button plain size="small"><el-icon><Edit /></el-icon>&nbsp;&nbsp;Edit</el-button>
            </template>
          </el-popover>
          &nbsp;
          <el-popconfirm  
            :teleported="false"     
            title="Are you sure to delete this?"
          >
            <template #reference>
              <el-button size="small"><el-icon><Delete /></el-icon>&nbsp;&nbsp;Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </general-table> 
    </template>

    <template #date="{ scope: { row } }">
      <el-icon><timer /></el-icon>
      {{  row.date }}
    </template>

    <template #operate>
      <el-button type="primary" size="small"><el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;add</el-button>
      <el-button plain size="small"><el-icon><Edit /></el-icon>&nbsp;&nbsp;Edit</el-button>
      <el-button size="small"><el-icon><Delete /></el-icon>&nbsp;&nbsp;Delete</el-button>
    </template>
  </general-table>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import GeneralTable from '@/components/GeneralTable.vue'

const columns = [
  { slot: 'expand', type: 'expand' },
  { label: 'date', slot: 'date' },
  { label: 'name', prop: 'name' },
  { label: 'address', prop: 'address' },
  { label: '操作', slot: 'operate' },
]

const expandCol = [
{ label: 'Name', prop: 'name', align: 'center' },
{ label: 'State', prop: 'state' },
{ label: 'City', prop: 'city' },
{ label: 'address', prop: 'address' },
{ label: 'Zip', prop: 'zip' },
{ label: '操作', slot: 'operate', width: 300 },
]

const tableAttr = {
  rowstyle: () => {
    return {
      position: 'relative',
      zIndex: 0
    }
  },
  rowclick: () => {
    let listDom: any = document.querySelectorAll('.el-table__row')
    listDom.forEach((item: any) => {
      item.style.zIndex = 0
    })
  },
  border: true
}

interface expand {
  name: string
  state: string
  address: string
  city: string
  zip: string
}
const expandTable: expand[] = [
  {
    name: 'Jerry',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
  {
    name: 'Spike',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
  {
    name: 'Tyke',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
]

interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
  
</script>
